<template>
    <div class="rizhi-box">
        <div class="rizhi-one">
            <div class="rizhi-one-left"><span></span> &nbsp&nbsp商品日志</div>
            <div class="right-one-right">
                <el-button class="edit_btn" @click="shua"><i class="el-icon-refresh"><span>&nbsp&nbsp刷新</span></i></el-button>
                <el-button class="edit_btn" @click="$router.push('/Account')"><i class="el-icon-arrow-left"></i><span>&nbsp&nbsp返回</span></el-button>
            </div>
        </div>
        <div class="rizhi-table">
            <div class="rizhi-table-one">
                <span style="padding-left: 20px;">
                    <i class="el-icon-s-unfold" style="color: #666666;"></i>
                    <span style="color: #666666">商品数据列表</span>
                </span>
            </div>
            <div class="rizhi-table-two">
                <el-table
                        :data="tableData.slice((currentPage - 1) * pagesize,currentPage * pagesize)"
                        border
                        type="selection"
                        style="width: 1200px"
                        :header-cell-style="{background:'#F9FAFC'}"
                        @selection-change="handleSelectionChange">
                    <!-- 复选框 -->
                    <el-table-column
                            type="selection"
                            align="center">
                    </el-table-column>
                    <!-- 商品编号 -->
                    <el-table-column
                            prop="journalId"
                            fixed
                            align="center"
                            label="商品编号"
                            width="130">
                    </el-table-column>
                    <!-- 商品名称 -->
                    <el-table-column
                            prop="journalName"
                            align="center"
                            label="商品名称"
                            width="130">
                    </el-table-column>
                    <!-- 销售价格 -->
                    <el-table-column
                            prop="journalPrice"
                            align="center"
                            label="销售价格"
                            width="130">
                    </el-table-column>
                    <!-- 促销价格 -->
                    <el-table-column
                            prop="journalPrices"
                            align="center"
                            label="促销价格"
                            width="130">
                    </el-table-column>
                    <!-- 上架下架 -->
                    <el-table-column
                            prop="journalStat"
                            align="center"
                            label="上架/下架"
                            :formatter="shangjia"
                            width="150">
                    </el-table-column>
                    <!-- 审核状态 -->
                    <el-table-column
                            prop="journalShe"
                            align="center"
                            label="审核状态"
                            :formatter="shehe"
                            width="150">
                    </el-table-column>
                    <!-- 更新人 -->
                    <el-table-column
                            prop="journalPeople"
                            align="center"
                            label="更新人"
                            :formatter="gengxin"
                            width="130">
                    </el-table-column>
                    <!-- 更新时间 -->
                    <el-table-column
                            prop="journalDate"
                            align="center"
                            label="更新时间"
                            width="200">
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div class="page-box">
                    <el-pagination
                            class="pagination"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[1,2,3,4,5,6,7,8]"
                            :page-size="pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ProductLog",
        inject: ['reload'], //注入
        //生命周期
        created(){
            this.getAll()
        },
        data(){
            return{
                //表格中的数据
                tableData:[],
                //分页
                currentPage: 1,//默认的页数
                currentIndex: ' ',
                pagesize: 5,//总条数
                //复选框
                multipleSelection: [],
            }
        },
        methods:{
            //刷新
            shua(){
                this.reload();//局部刷新
            },
            //分页
            handleSizeChange(val){
                this.pagesize = val;
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val){
                this.currentPage = val
            },
            //全查
            getAll(){
                //拿到表格中的数据
                this.$http.get(`/journal/getAll`).then(response => {
                    this.tableData = response.data.data;
                },response => {
                    alert("日志数据请求失败！！！")
                })
            },
            //复选框
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //上架下架
            shangjia(row,index){
                if (row.journalStat == 1){
                    return "已上架";
                } else if (row.journalStat == 2){
                    return "已下架"
                }
            },
            //审核
            shehe(row,index){
                if (row.journalShe == 3){
                    return "未审核";
                } else if (row.journalShe == 4){
                    return "审核中";
                }else if (row.journalShe == 5){
                    return "审核失败";
                } else if (row.journalShe == 6){
                    return "其他";
                }
            },
            //更新人
            gengxin(row,index){
                if (row.journalPeople == 1) {
                    return "张三";
                }else if (row.journalPeople == 2){
                    return "李四";
                }
            }
        },
    }
</script>

<style scoped long="less">
    /*初始化样式*/
    *{
        padding: 0;
        margin: 0;
        font-size: 13px;
    }
    /*在外边套一个盒子，使页面不会乱跑*/
    .rizhi-box{
        width: 1470px;
    }
    /*商品日志需要页面百分百*/
    .rizhi-one{
        height: 50px;
        line-height: 50px;
        width: 100%;
        background: #F3F3F3;
        margin-bottom: 20px;
    }
    /*商品日志需要左浮动*/
    .rizhi-one-left{
        float: left;
        color: #99A4BF;
    }
    /*刷新等一些按钮需要右浮动*/
    .right-one-right{
        float: right;
        padding-right: 160px;
    }
    /*商品日志需要一个绿色的边框*/
    .rizhi-one-left span{
        padding-left: 0px;
        border-left: 5px solid #1ABC9C;
    }
    /*商品数据列表与表格需要一样的宽度*/
    .rizhi-table,.rizhi-table-two{
        width: 1200px;
    }
    /*商品数据列表需要一个高度，使其颜色展示出来*/
    .rizhi-table-one{
        height: 50px;
        line-height: 50px;
        background: #F3F3F3;
    }
    /*分页边框的样式*/
    .pagination{
        padding-top: 10px;
        padding-right: 20px;
        text-align: right;
        background: #FDFDFE;
        border: 1px solid #E4E4E4;
        width: 1173px;
        height: 40px;
    }
    /*改变按钮的样式*/
    .edit_btn{
        margin-top: 8px;
        height: 35px;
        line-height: 10px;
        width: 100px;
    }
</style>